<template>
  <view class="course-detail-container" v-if="course">
    <navbar :title="course?course.title: '学习资料'"></navbar>
    <view class="group-container">
      <view class="label">1、打印或者下载资料</view>
      <view class="content">
        您可以点击下方“复制资料网址”按钮，可以复制该资料的网站，在浏览器打开即可保存下载。如果您要打印答案，可以将该网址交由打印店，即可打印纸质版资料。
      </view>
      <view class="btn" @click="copy">复制资料网址</view>
    </view>
    <view class="group-container">
      <view class="label">2、发送资料到我的邮箱</view>
      <view class="content">
        您可以点击下方“发送邮箱”按钮，填写您的邮箱后可以收到学习资料。
      </view>
      <view class="main-input-wrapper">
        <input placeholder="输入您的邮箱接收资料" v-model="mail"/>
      </view>
      <view class="btn" @click="trySendMail">发送邮箱</view>
    </view>
  </view>
</template>

<script>
import fanzhishiApi from "../../fanzhishiApi";
import fanzhishiUtils from "../../libs/fanzhishiUtils";
import {courseApi} from "@/api";
import Navbar from "@/components/navbar.vue";

export default {
  components: {Navbar},
  data() {
    return {
      course: null,
      mail: null
    }
  },
  onLoad({id}) {
    this.init(id)
  },
  methods: {
    async init(id) {
      const res = await courseApi.info(id)
      this.course = res.data.data
    },
    copy() {
      console.log('xxx', this.course.url)
      uni.setClipboardData({
        data: this.course.url,
        success: function () {
          uni.showToast({
            title: '资料链接复制成功！',
            icon: 'none',
            duration: 2000
          });
        }
      });
    },
    async trySendMail() {
      if (!this.mail) {
        uni.showToast({
          title: '请填写您的邮箱！',
          icon: 'none',
          duration: 2000
        });
        return
      }
      const m = this.mail.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/)
      if (!m) {
        uni.showToast({
          title: '请填写正确的邮箱！',
          icon: 'none',
          duration: 2000
        });
        return
      }
      uni.showLoading();
      try {
        await courseApi.postCourseToMail(this.course.id, this.mail)
        uni.showToast({
          title: '发送成功，请注意查收！',
          icon: 'none',
          duration: 2000
        });
      } catch (e) {
        uni.hideLoading()
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss">
.course-detail-container {
  flex-direction: column;
  background: #fff;

  .course-container {
    padding: 42rpx 30rpx;
    display: flex;
    flex-direction: column;

    .title {
      font-size: 18px;
      color: #000;
      font-weight: bold;
    }

    .btn {
      height: 80rpx;
      color: #fff;
      border-radius: 10rpx;
      margin-top: 30rpx;
      font-size: 16px;
      background-color: #2c5bfc;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .group-container {
    padding: 20rpx 30rpx;
    flex-direction: column;

    .label {
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .content {
      line-height: 22px;
      color: #666;
    }

    .main-input-wrapper {
      border-radius: 10rpx;
    }

    .btn {
      font-size: 16px;
      height: 80rpx;
      color: #2c5bfc;
      border-radius: 10rpx;
      margin-top: 30rpx;
      border: 1px solid #2c5bfc;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
